Using bevel effects to draw button states

You can use any object to create a rollover state. However, because buttons are a common type of JavaScript rollover, Fireworks includes Live Effect presets to simplify the creation of common button appearances. Apply an Inner Bevel or Outer Bevel effect to an object, and then choose Raised, Highlighted, Inset, or Inverted from the Button Presets pop-up in the Effect panel.

Button Presets effect Description

Raised

The bevel appears raised up from the underlying objects.

Highlighted

The button's colors lighten.

Inset

The bevel appears sunken into the underlying objects.

Inverted

The bevel appears sunken into the underlying objects and the colors lighten.


For example, if you are creating a four-state button, you could apply Raised to the Up state graphic, Highlighted to the Down state graphic, and so on.

For more information about Live Effects, see Applying a Live Effect.